<template>
  <div class="app-container calendar-list-container">
    <!-- 输入查询 -->
    <div class="filter-container">
      <!-- style="width: 150px;margin-right:15px;margin-top:7px" -->
      <el-input
            @keyup.enter.native="getData"
            clearable
            v-model="listQuery.account"
            style="margin-right:15px;margin-top:7px"
            :style="{ width: inputWid(listQuery.account) }"
            class="filter-item"
            placeholder="请输入登录账号"
      ></el-input>
      <el-input
            @keyup.enter.native="getData"
            clearable
            v-model="listQuery.phone"
            style="width: 150px;margin-right:15px;margin-top:7px"
            class="filter-item"
            placeholder="请输入电话号码"
      ></el-input>
      <el-select
      filterable
            clearable
            @keyup.enter.native="getData"
            @focus="getRoleInfo"
            v-model="listQuery.roleId"
            style="width: 150px;margin-right:15px;"
            class="filter-item"
            placeholder="请输入角色类型" >
        <el-option :value="item.roleId" :label="item.roleName" v-for="(item,index) of this.roleList" :key="index"/>
      </el-select>
      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="getData">搜索</el-button>
    </div>

    <!-- 表单 -->
    <el-table :data="dealList"  stripe border fit highlight-current-row style="width: 100%">
        <el-table-column  label="序号" type="index" align="center"/>
        <el-table-column  label="账号" prop="account" align="center"/>
        <el-table-column  label="创建时间" prop="createTime" align="center"/>
        <el-table-column  label="更新时间" prop="updateTime" align="center"/>
        <el-table-column  label="工号" prop="jobNumber" align="center"/>
        <el-table-column  label="手机号码" prop="phone" align="center"/>
        <el-table-column  label="角色类型" prop="roleName" align="center"/>
        <el-table-column  label="操作" align="center" width="230">
        <!-- <el-table-column label="工段状态" prop="status" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status" size="medium" effect="dark" @click="statusSwitch" type="success">启用</el-tag>
            <el-tag v-else effect="dark" size="medium" type="info">禁用</el-tag>
          </template>
        </el-table-column> -->
          <template slot-scope="scope" v-if="userInfo.roleId != 37">
            <el-button size="mini" type="primary" @click="handleEdit(scope.row)">修改</el-button>
          </template>
        </el-table-column>
    </el-table>

    <!-- 修改管理员信息弹出表单 -->
    <el-dialog title="管理员信息修改" :visible.sync="dialogFormVisible" width="700px">
    <el-form ref="form" :model="modifyform" :rules="rules">
      <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
        <el-input v-model="modifyform.password" style="width:400px"/>
      </el-form-item>
      <el-form-item label="员工工号" :label-width="formLabelWidth">
        <el-input v-model="modifyform.jobNumber" @change="changeJobNumber" style="width:400px" />
      </el-form-item>
      <el-form-item label="员工角色" :label-width="formLabelWidth">
        <el-select v-model="modifyform.roleName" placeholder="请选择该员工当前角色" @focus="getRoleInfo" @change="changeRole" style="width:400px" >
            <el-option :value="item.roleId" :label="item.roleName" v-for="(item,index) of this.roleList" :key="index"/>
        </el-select>
      </el-form-item>
      <el-form-item label="电话号码" :label-width="formLabelWidth">
        <el-input v-model="modifyform.phone" style="width:400px" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitForm('form')">确 定</el-button>
    </div>
    </el-dialog>

    <!-- pagination 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.offset"
        :page-sizes="[5,10, 20, 30, 40,100,300,500]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

  </div>
</template>

<script>
import { checkManagerInfo, changeAuthStatus, getInfoById, changeInfoBySuper, NumericalControl } from '@/api/manager'
import { getRoleList } from '@/api/user'
export default {
    data() {
      // 密码的校验方法
      const validatePass = (rules, value, callback) => {
          if(value === '') {
              callback(new Error('请输入密码'))
          } else if(value.length < 6 || 20 < value.length ) {
              callback(new Error('密码长度必须大于6位且小于20位'))
          } else {
              callback()
          }
      }
      return {
        listQuery: {
          account: '',
          phone: '',
          roleId: '',
          offset: 1,
          limit: 10
        },
        modifyform: {
          adminId: '',
          password: '',
          jobNumber: '',
          roleId: '',
          roleName: '',
          phone: ''
        },
        total: '',
        roleList: {},
        dealList: null,
        // 弹框显示的判断条件
        dialogFormVisible: false,
        // 弹框内部组件的宽度设定
        formLabelWidth: '100px',
        rules: {
          password: [{validator: validatePass, trigger: 'blur'}]
        },
        userInfo: this.$store.state.user.userInfo,
      }
    },
    computed: {
      inputWid() {
        return function (value) {
            if(!value || (value.length <= 10)){
              return '150px'
            } else {
              return (150 + (String(value).length-10)*6) + 'px'
            }
        }
      }
    },
    methods: {
      async changeJobNumber(){
        const res = await NumericalControl({jobNumber: this.modifyform.jobNumber})
        if(res.data && res.data.phone){
          this.modifyform.phone = res.data.phone
          this.$message.success('获取号码成功')
        } else {
          this.$message.error('员工工号不存在')
        }
      },
        submitForm(formName) {
          this.$refs[formName].validate(async (valid) => {
            if (valid) {
              console.log('submit!!')
              const res = await NumericalControl({jobNumber: this.modifyform.jobNumber})
              if(!res.data) return this.$message.error('员工工号不正确！')
              this.modifyManagerInfo()
            } else {
              console.log('error submit!!');
              return false;
            }
          });
      },
      // 更新当前角色
      changeRole(val) {
        this.modifyform.roleId = val
      },
      // 获取角色列表函数,当选择器框获得焦点时触发,从服务器调取参数
      async getRoleInfo() {
      try {
        const res = await getRoleList()
        this.roleList = res.data
        console.log(this.roleList,'roleList')
      } catch (err) {}
        console.log(this.roleList,'roleList')
    },
    // 获取表格某行的数据
    async handleEdit(item) {
      this.dialogFormVisible = true
      const data = await getInfoById({adminId: item.adminId})
      this.modifyform = Object.assign({},data.data)
    },
    // 修改管理员信息"确定"按钮，提交modifyform表单
    async modifyManagerInfo() {
      let query = Object.assign({},this.modifyform)
      // query.roleId = this.modifyform.roleId
      const data = await changeInfoBySuper(query)
      this.dialogFormVisible = false
      this.handleFilter()
    },
    // 提交请求参数，查询管理员列表
    async handleFilter() {
      let query = {
        account: this.listQuery.account,
        phone: this.listQuery.phone,
        roleId: this.listQuery.roleId,
        page: this.listQuery.offset,
        limit: this.listQuery.limit
      }
      // 暂时去掉，问题：当条件为空，切换页数为6（任意数）时，再通过选择员工部门查询，查询后的页码还是原来的6，切换页数永远是1。
      // if(this.listQuery.account != '' ||
      //    this.listQuery.phone != '' ||
      //    this.listQuery.roleId != '') {
      //      query.page = 1
      //    } else {}
      const data = await checkManagerInfo(query)
      this.dealList = data.data.records
      this.total = data.data.total
    },
    getData(){
        this.listQuery.offset = 1
        this.listQuery.limit = 10
        this.handleFilter()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.handleFilter()
    },
     handleCurrentChange(val) {
      this.listQuery.offset = val
      this.handleFilter()
    }
  },
   // 在生命周期函数调用"搜索"按钮绑定的函数，显示已有的数据
  mounted() {
    this.handleFilter();
  },
}
</script>

<style>

</style>
